<template>
    <div id="goods-list">
        <transition name="aniopacity">
            <div @click="opacityClick" id="ani-opacity" v-show="aniShow"></div>
        </transition>
        <transition name="aniscreen">
            <Screen v-show="aniShow"></Screen>
        </transition>
        <PageTitle>商品列表</PageTitle>
        <div class="pages-top pages-scroll-two">
            <img style="width:100%" src="/images/list/lunbo1.jpg">
            <div>
                <ul>
                    <li :class="{'heigh-light':isColor=='销量'}">销量</li>
                    <li @click="newClick" :class="{'heigh-light':isColor=='新品'}">新品</li>
                    <li @click="priceClick" :class="{'heigh-light':isColor=='价格'}">价格</li>
                    <li @click="screenClick" :class="{'heigh-light':isColor=='筛选'}">筛选<img src="../../static/icon/ic_shaixuan_n.png"></li>
                </ul>

                
                    <div id="list-box">
                        <router-link :to="'/goods/Product/'+g._id" class="list" v-for="(g,i) in goodsList" :key="i">
                            <div>
                                <img :src="g.goodsImg[0]">
                                <h4>{{g.goodsName}} {{g.teaName}} {{g.year}}{{g.season}} {{g.classifyName}} {{g.odor}} {{g.goodsClass}} {{g.netContent}}克</h4>
                                <p>{{g.description}}</p>
                                <p style="color:red;font-weight: 700;">{{g.price|currency}}</p>
                                <p>{{g.evaluate}}人好评</p>
                            </div>
                        </router-link>
                    </div>
                
            </div>
            <p style="text-align: center;">没有更多了~~</p>
        </div>
    
        
    
    
        
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import {mapState} from "vuex";
import Screen from "../components/Screen.vue";
export default {
    components:{PageTitle,Screen},
    mounted(){

        this.$store.dispatch("requestGoodsList",{
            classifyName:this.$route.params.classifyName,
            teaName:this.$route.params.tea
        });
    },
    computed:{
        ...mapState([
            "goodsList",
            "aniShow"
        ])
    },
    methods:{
        opacityClick(){
            this.$store.commit("setAniShow",false);
        },
        screenClick(e){
            this.isColor = e.target.textContent;
            this.$store.commit("setAniShow",true);
        },
        priceClick(e){
            this.isColor = e.target.textContent;
            if(this.priceSort==1){
                this.priceSort = -1;
            }else{
                this.priceSort = 1;
            }
            this.$store.dispatch("requestGoodsList",{
                classifyName:this.$route.params.classifyName,
                teaName:this.$route.params.tea,
                priceSort:this.priceSort
            });
        },
        newClick(e){
            this.isColor = e.target.textContent;
            this.$store.dispatch("requestGoodsList",{
                classifyName:this.$route.params.classifyName,
                teaName:this.$route.params.tea,
                _id:-1,
            });
        }
    },
    data(){
        return {
            priceSort:-1,
            isColor:'',
        }
    }
}
</script>
<style scoped>
    #goods-list{
        background-color: #F4F4F4;
        z-index: 20;
    }
    ul{
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        background-color: white;
        height: 12.2vw;
        line-height: 12.2vw;
        font-size: 3.92vw;
        color: #666;
    }
    li{
        list-style: none;
        vertical-align: top;
    }
    li img{
        width: 3vw;
    }
    #list-box{
        margin-top: 2.8vw;
        background-color: white;
        display: flex;
        flex-wrap: wrap;
    }
    .list{
        width: 50%;
         border: 0.5px solid #F4F4F4; 
        text-align: center;
    }
    .list img{
        width: 35vw;
        height: 35vw;
    }
    h4{
        width: 100%;
        display: -webkit-box;
        overflow : hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 10vw;
        /* display: -moz-box;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical; */
    }
    p{
        margin: 10px 0;
    }
    #ani-opacity{
        position: absolute;
        width: 100%;
        height: 100vh;
        background-color: black;
        opacity: 0.5;
        z-index: 50;
        left: 0;
        top:0;
    }
     .aniopacity-enter,.aniopacity-leave-to{
        opacity: 0 !important;
    }
    .aniopacity-enter-active,.aniopacity-leave-active{
        transition: all 0.7s;
    }
    .aniopacity-enter-to,.aniopacity-leave{
        opacity: 0.5 !important;
    } 
      /*----  */

    .aniscreen-enter,.aniscreen-leave-to{
        transform: translate(0,100%);
    }
    .aniscreen-enter-active,.aniscreen-leave-active{
        transition: all 0.7s;
    }
    .aniscreen-enter-to,.aniscreen-leave{
        transform: translate(0,0);
    }

    .heigh-light{
        color:#ff3600;
    }

</style>